<template>
  <div>
    <Header />
    <div class="ipt">
      <div class="search">
        <van-search v-model="ipt" placeholder="请输入地址" />
      </div>
      <div class="search-res">
        <ul>
          <li
            v-for="(item, index) in res"
            :key="index"
            @click="changePoint(item.title)">
            {{ item.title }}
          </li>
        </ul>
      </div>
    </div>
    <div class="citybox">
      <div class="title">显示当前位置</div>
      <div class="city" id="allmap"></div>
    </div>
  </div>
</template>

<script>
import Header from "@/components/header/header.vue";

export default {
  components: {
    Header,
  },
  data() {
    return {
      ipt: "",
      map: "",
      res: "",
    };
  },
  computed: {},
  watch: {
    ipt() {
      if (this.ipt == "") {
        this.res = "";
      }
      this.search();
    },
  },
  mounted() {
    let point = JSON.parse(localStorage.getItem("point"));
    var map = new BMap.Map("allmap");
    map.centerAndZoom(new BMap.Point(point.lng, point.lat), 11);
    this.map = map;
  },
  methods: {
    changePoint(e) {
      this.ipt = e;
      localStorage.setItem("address", e);
      this.$router.push({ path: "/home" });
    },
    search() {
      var options = {
        renderOptions: { map: this.map },
        onSearchComplete: (results) => {
          // 判断状态是否正确
          if (local.getStatus() == BMAP_STATUS_SUCCESS) {
            this.res = results.Hr;
            console.log(results);
          }
        },
      };
      var local = new BMap.LocalSearch(this.map, options);
      local.search(this.ipt);
    },
  },
};
</script>

<style scoped lang="scss">
.ipt {
  position: relative;
  .search-res {
    position: absolute;
    left: 0;
    top: 54px;
    ul {
      padding: 0 10px;
      li {
        height: 30px;
        line-height: 30px;
        font-size: 16px;
      }
    }
  }
}
.citybox {
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
  .title {
    font-size: 18px;
    font-weight: 700;
    padding: 10px 0;
  }
  .city {
    height: 200px;
  }
}
</style>
